<template>
	<div class="wraper" :class="{padTop:isIphoneX,iphone:isIphone}">
		<div class="nav-bar">
			<div class="arrow" @click="goBack"></div>
			<div class="desc">
				<span class="history" @click="$router.push('/orderList?pageState='+tradeStatus)">历史订单<i v-if="haveUnpaiedInmoneyOrder" class="dot"></i></span>
				<span class="real-name" @click="isRealName" style="display:none;">
					<img v-if="realName==3" src="../../static/images/status3.png">
					<img v-else-if="realName==2" src="../../static/images/status2.png">
					<img v-else src="../../static/images/status1.png">
				</span>
			</div>
		</div>
		<div class="trade-status" v-if="uiEdit==0">
			<span :class="{on:tradeStatus==1}" @click="changeTradeStatus(1)">{{$t('index-wantBy')}}</span>
			<span :class="{on:tradeStatus==2}" @click="changeTradeStatus(2)">{{$t('index-wantSell')}}</span>
		</div>
		<div class="trade-status" v-else-if="uiEdit == 1">
			<span :class="{on:tradeStatus==1}" @click="changeTradeStatus(1)">{{$t('index-recharge')}}</span>
			<span :class="{on:tradeStatus==2}" @click="changeTradeStatus(2)">{{$t('index-recharge2')}}</span>
		</div>
		<div class="trade-status" v-else-if="uiEdit == 2">
			<span :class="{on:tradeStatus==2}" @click="changeTradeStatus(2)">提现</span>
			<span :class="{on:tradeStatus==1}" @click="changeTradeStatus(1)">提币</span>
		</div>
		<!-- 列表 -->
		<div class="project">
			<ul :style="{'width':(1.4*list.length+'rem')}">
				<div class="item" v-for="item in list" :class="{on:item.selected}" @click="selectItem(item)">
					<p><img :src="item.icon" alt=""></p>
					<p>{{item.name}}</p>
				</div>
			</ul>
		</div>
		<!-- 在线客服按钮 -->
		<div class="server-dialog" v-if="showService" @click.stop="stop">
			<div class="box">
				<div class="title">请添加客服微信</div>
				<div class="img">
					<img src="../../static/images/service.jpeg" alt="">
				</div>
				<p>客服微信号：{{serverNumber}}</p>
				<div class="btn" @click.stop="copyService">复制微信号</div>
			</div>
			<div class="close" @click.stop="showService=false"></div>
		</div>
		<!-- 弹窗购买层 -->
		<div class="buy-content" :class="{send:tradeStatus===2}" v-if="listItem.name">
			<div class="title">
				<div class="left">
					<img :src="listItem.icon">
					<div class="title-desc">
						<h2>
							{{listItem.name}}
							<!-- <span :class="{isAndroid:isAndroid}" v-if="tradeStatus == 1 && listItem.name==='USDT' && !isInUsdt">首冲即送100赠金</span> -->
						</h2>
						<p v-if="listItem.desc">{{listItem.desc}}</p>
					</div>
				</div>
				<div class="right">1{{listItem.name}} ≈ {{listItem.exchange.toFixed(2)}}元</div>
			</div>
			<div class="item" @click="amountSetFocus">
				<span class="label">数量</span>
				<input type="number" ref="input1" @blur="amountBlur" @focus="amountFocus" v-model="amount" :placeholder="p1">
				<span class="unit">{{listItem.name}}<b v-if="tradeStatus===2" @click.stop="sellAll">全部</b></span>
			</div>
			<div class="item" @click="moneySetFocus">
				<span class="label">金额</span>
				<input type="number" ref="input2" @blur="moneyBlur" @focus="moneyFocus" v-model="amountOfMoney" :placeholder="p2">
				<span class="unit">元</span>
			</div>
			<van-button 
				@click="goNext" 
				loading-text="加载中..." 
				:loading="btnLoading"
				class="btn" 
				type="primary" 
				color="#16B89D">
				{{uiEdit==1?'立即充值':uiEdit==2?'立即提现':tradeStatus==1?'立即购买':'立即出售'}}
			</van-button>
			<div class="balance">
				<span v-if="tradeStatus==2 && listItem.name">可用余额：{{listItem.balance?listItem.balance:0}} {{listItem.name}}</span>
			</div>
		</div>
	</div>
</template>
<script src="./index.js"></script>
<style scoped lang="scss">
	@import './index.scss';
</style>
<style>
	.van-dialog__content--isolated{
		min-height: 75px;
		font-weight: 400;
		color: #222;
	}
	.sellType-dialog-index{
		width: 5rem;
		border-radius: 0.2rem;
	}
	.sellType-dialog-index button{
		height: 0.8rem;
		line-height: 0.8rem;
		font-size: 0.3rem;
	}
	.van-overlay.sellType-mark-index{
		background-color: rgba(0,0,0,.5);
	}
</style>